<template>
  <div class="tarbar">
    <div class="tarbar-flow">
      <div
          v-for="(item,index) in flows"
          :key="index"
          class="tarbar-flow-item"
          :class="[currentIndex==index?'flow-active':'']"
          @click.stop="SwitchingFlow(item,index)"
          @dblclick.stop="DoubleClickHandler(item,index)"
      >
        <div>
          {{ item.Title }}
        </div>
        <el-icon @click.stop="deleteFlow(item,index)" style="margin: 0 10px">
          <Delete/>
        </el-icon>
      </div>
      <div class="tarbar-flow-item" style="border-right:0;margin-right: 30px;font-size: 20px;color: #545c64">
        <el-icon @click.stop="addFlow">
          <Plus/>
        </el-icon>
      </div>
    </div>
    <div v-for="group in itemGroups" :key="group.name" class="group">
      <el-tooltip
          v-for="item in group.items"
          :key="item.name"
          class="item"
          effect="dark"
          :content="item.label"
          placement="bottom"
      >
        <el-button :disabled="invalid(item.name) || IsDisabled" class="command" @click="clickTarbarItem(item)">
          <svg-icon :class-name="item.icon"/>
        </el-button>
      </el-tooltip>
      <div class="divider"/>
    </div>
    <el-dialog v-model="ShowFlowInfoSettingDialog" title="流程设置" width="500" draggable overflow>
      <flow-info-setting ref="FlowInfoSettingRef" @close="OnClose"/>
    </el-dialog>
  </div>
</template>

<script>
import FlowRuntimeApi from '@/api/flow/FlowRuntimeApi'
import EventBus from '../../../libs/EventBus'
import { AppParams } from '@/utils/appParams'
import { Emitter } from "@/utils/Emitter";

import { useFlowStore } from "@/store/modules/flow/flowStore";
import FlowInfoSetting from "@/views/flow/FlowInfoSetting.vue";
import { FlowApi } from "@/api/FlowApi";

const FlowStore = useFlowStore()

export default {
  name: 'TabBar',
  components: {
    FlowInfoSetting
  },
  props: {
    itemGroups: {
      type: Array,
      default: function () {
        return [
          {
            name: 'file',
            items: [
              {
                label: '用户登录',
                dialogWidth: '355px',
                icon: 'UserFilled',
                name: AppParams.JAVA_SCRIPT_EVENT.USER_LOGIN
              },
              // {
              //   label: '打开流程',
              //   name: 'openFlow'
              // },
              {
                label: '编辑画面',
                icon: 'Odometer',
                name: AppParams.JAVA_SCRIPT_EVENT.EDIT_VIEW_FLOW
              }
            ]
          },
          {
            name: 'edit',
            items: [
              {
                label: '复制',
                name: 'copy',
                icon: 'CopyDocument'
              },
              {
                label: '粘贴',
                name: 'paste',
                icon: 'Document'
              },
              {
                label: '删除',
                name: 'delete',
                icon: 'Delete'
              }
            ]
          },
          // {
          //   name: 'group',
          //   items: [
          //     {
          //       label: '添加组',
          //       name: 'addGroup'
          //     },
          //     {
          //       label: '取消组',
          //       name: 'ungroup'
          //     },
          //     {
          //       label: '进入组',
          //       name: 'enterGroup'
          //     }
          //   ]
          // },
          {
            name: 'drive',
            items: [
              {
                label: '设备管理',
                dialogWidth: '60%',
                name: AppParams.JAVA_SCRIPT_EVENT.DEVICE_MANAGE,
                icon: 'SetUp'
              },
              {
                label: '事件管理',
                name: AppParams.JAVA_SCRIPT_EVENT.EVENT_MANAGE,
                icon: 'Sunset'
              },
              {
                label: '数据管理',
                dialogWidth: '90%',
                dialog: true,
                name: AppParams.JAVA_SCRIPT_EVENT.DATA_MANAGE,
                icon: 'Coin'
              },
              {
                label: '全局变量',
                dialogWidth: '65%',
                dialog: true,
                icon: 'SwitchFilled',
                name: AppParams.JAVA_SCRIPT_EVENT.GLOBAL_PARAM
              },
              {
                label: '用户界面',
                name: AppParams.JAVA_SCRIPT_EVENT.USER_PAGE,
                icon: 'Monitor'
              },
              {
                label: '启用/禁用',
                name: AppParams.JAVA_SCRIPT_EVENT.NODE_ENABLED_DISABLE,
                icon: 'WarningFilled'
              },
              {
                label: '单次执行',
                name: AppParams.JAVA_SCRIPT_EVENT.ONCE_RUN,
                icon: 'VideoPlay'
              },
              {
                label: '停止',
                name: AppParams.JAVA_SCRIPT_EVENT.STOP_PROCESSOR,
                icon: 'VideoPause'
              }
            ]
          }
        ]
      }
    },
    actives: {
      type: Object,
      default: function () {
        return {
          copy: false,
          paste: false,
          delete: false,
          addGroup: false,
          ungroup: false,
          enterGroup: false,
          dashboard: true
        }
      }
    }
  },
  data () {
    return {
      IsDisabled: false,
      currentIndex: 0,
      ShowFlowInfoSettingDialog: false
    }
  },
  computed: {
    flows () {
      return Object.assign([], FlowStore.AllFlow)
    }
  },
  methods: {
    OnClose () {
      this.ShowFlowInfoSettingDialog = false;
    },
    /**
     * 选择流程
     * @param item
     * @param index
     */
    SwitchingFlow (item, index) {
      this.currentIndex = index
      FlowStore.SetCurrentFlow(item)
      this.$emit('change-flow')
    },
    DoubleClickHandler (item, index) {
      this.ShowFlowInfoSettingDialog = true
      this.$nextTick(() => {
        this.$refs['FlowInfoSettingRef']._Show(item.id)
      })
    },
    /**
     * 删除流程
     */
    deleteFlow (item, index) {
      this.$confirm(`是否删除流程：${item.Title}？`, `确认删除流程`, {
        distinguishCancelAndClose: true,
        roundButton: true,
        confirmButtonClass: 'el-button--warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {

        FlowApi.Delete(item.id).then((res) => {
          let Flows = this.flows
          Flows.splice(index, 1)
          if (Flows.length > 0) {
            this.SwitchingFlow(Flows.at(-1), Flows.length - 1)
          }
          this.$message({
            message: '删除流程成功',
            type: 'success'
          })
        })
      })
    },
    addFlow () {
      new FlowRuntimeApi().AddFlow((_flow) => {
        FlowStore.SetAllFlow()
        this.$message({
          message: '添加流程成功',
          type: 'success'
        })
      })
    },
    invalid (name) {
      return !this.actives[name]
    },

    /**
     * 工具栏按钮被点击事件，
     * 对外发布事件
     * @param name
     */
    clickTarbarItem (item) {
      this.IsDisabled = true
      setTimeout(() => {
        this.IsDisabled = false
      }, 1000)
      const name = item.name
      item.MessageBusType = name
      EventBus.$emit(name, item)
      Emitter.emit(AppParams.JAVA_SCRIPT_EVENT.POST_MESSAGE_BUS, item)
      if (name === 'openFlow') {
        // new SystemApi().SelectFile()
        return
      }
      switch (name) {
        case 'playon_fill':
          // new FlowRuntimeApi().RunFlow()
          break
        case 'stop_fill':
          new FlowRuntimeApi().StopFlow((res) => {
            if (res === 'True') {
              Emitter.emit(AppParams.JAVA_SCRIPT_EVENT.NODE_START, {})
            }
          })
          break
        case 'data_manage':
          // EventBus.$emit(AppParams.JAVA_SCRIPT_EVENT.DATA_MANAGE, {})
          break
        case 'event':
          // EventBus.$emit(AppParams.JAVA_SCRIPT_EVENT.EVENT_MANAGE)
          break
      }
      this.$emit('tarbar-action', name)
    }
  },
  mounted () {
  },
  beforeUnmount () {
    const es = AppParams.JAVA_SCRIPT_EVENT
    for (let en of [es.USER_LOGIN,
      es.DEVICE_MANAGE,
      es.EVENT_MANAGE,
      // es.ONCE_RUN,
      es.STOP_PROCESSOR,
      es.DATA_MANAGE,
      es.GLOBAL_PARAM,
      es.USER_PAGE]) {
      Emitter.off(en)
    }
  }
}
</script>

<style lang="less" scoped>
.tarbar {
  padding: 8px;

  .tarbar-flow {
    font-size: 12px;
    width: calc(100vw - 220px);
    padding: 0 0 8px 0;
    color: #303133;
    border-bottom: 1px solid #EBEEF5;
    font-weight: 500;
    display: flex;
    height: 32px;
    overflow-x: auto;

    .tarbar-flow-item {
      padding: 0 8px;
      border-right: 1px solid #bdbec0;
      display: flex;
      cursor: pointer;
      user-select: none;
      align-items: center;

      > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .el-icon-delete {
        margin-left: 10px;
      }
    }

    .flow-active {
      color: white;
      background: rgba(8, 154, 8, 0.87);
    }
  }

  .group {
    display: inline-block;

    .command {
      padding: 8px 8px;
      border: 1px solid #fff;
      margin-left: 0;
    }

    .divider {
      display: inline-block;
      width: 1px;
      height: 1em;
      margin: 0 8px;
      vertical-align: middle;
      position: relative;
      background-color: #dcdfe6;
    }
  }
}
</style>
